<template>
  <a-modal
    :title="internalName + '绩效目标信息'"
    :width="'60%'"
    :visible="visible"
    :confirmLoading="confirmLoading"
    :closable="false"
	  :maskClosable="false"
    cancelText="关闭"
  >
    <template slot="footer">
      <a-button key="submit" type="primary" @click="handleOk">确认</a-button>
    </template>
    <h5>
      您当前选择的{{this.internalName}}预算科目所对应的绩效目标信息如下，请关注报销时所采集的信息!
    </h5>
    <a-table
      ref="table"
      size="small"
      :scroll="{ y: 500 }"
      bordered
      rowKey="id"
      tableLayout="fixed"
      :columns="columns"
      :dataSource="dataSource"
      :header-cell-style="{'text-align':'center'}"
      :pagination="false"
      :loading="loading"
    >
      <!--数据获取类型为填报-->
      <template slot="expectedValue" slot-scope="record" v-if="record.dataAcquisitionType == 1">
        <!--填报类型为null-->
        <template v-if="null == record.inputType">
          <!--数据类型为定性-->
          <a-input v-if="record.dataType == 1" v-model="record.expectedValue"></a-input>
          <!--数据类型为定量-->
          <a-input-number :min="0"  v-if="record.dataType == 0" v-model="record.expectedValue"></a-input-number>
        </template>
        <template v-else>
          <!--定性文本域-->
          <a-textarea v-if="record.inputType.isTextArea == '0'" :placeholder="record.inputType.isRequired == '0'?'必须大于'+record.inputType.wordCount+'个字符':''" v-model="record.expectedValue" ></a-textarea>
          <!--定性非文本域-->
          <a-input v-else-if="record.inputType.isTextArea == '1'&& record.dataType == 1" :placeholder="record.inputType.isRequired == '0'?'必须大于'+record.inputType.wordCount+'个字符':''" v-model="record.expectedValue" ></a-input>
          <!--定量-->
          <a-input-number v-else-if="record.inputType.isTextArea == '1' && record.dataType == 0" v-model="record.expectedValue" ></a-input-number>
        </template>
      </template>
    </a-table>

  </a-modal>
</template>

<script>
  import { httpAction,getAction,postAction } from '@/api/manage'

  export default {
    name: 'ExpenditureTargetViewModal',
    props: {

    },
    data(){
      return{
        title:"操作",
        visible: false,
        confirmLoading: false,
        tableCode: '',
        internalName: '',
        internalId: '',
        /* 查询条件-请不要在queryParam中声明非字符串值的属性 */
        queryParam: {},
        /* 数据源 */
        dataSource:[],
        /* 分页参数 */
        ipagination:{
          current: 1,
          pageSize: 10,
          pageSizeOptions: ['10', '20', '50','100'],
          showTotal: (total, range) => {
            return range[0] + "-" + range[1] + " 共" + total + "条"
          },
          showQuickJumper: true,
          showSizeChanger: true,
          total: 0
        },
        /* 排序参数 */
        isorter:{
          column: 'createTime',
          order: 'desc',
        },
        /* 筛选参数 */
        filters: {},
        /* table加载状态 */
        loading:false,
        /* table选中keys*/
        selectedRowKeys: [],
        /* table选中records*/
        selectionRows: [],
        mainId:'',
        // 表头
        columns: [
          {
            title: '绩效目标名称',
            align: 'center',
            dataIndex: 'targetName',
            customRender: (value, row, index) => {
              console.log(value,'绩效目标名称')
              const obj = {
                children: value,
                attrs: {
                  rowSpan :parseInt(row.rowSpanOne)
                },
              };
              return obj;
            },
          },
          {
            title: '数据获取方式',
            align: 'center',
            dataIndex: 'dataAcquisitionType',
            customRender: (value, row, index) =>{
              console.log(value,'数据采集方式')
              const obj = {
                children: value == '0'?'采集':'填报',
                attrs: {
                  rowSpan:parseInt(row.rowSpanTwo)
                },
              };
              return obj;
            }
          },
          {
            title: '绩效数据名称',
            align: 'center',
            dataIndex: 'variableName',
            customRender: function(t, r, index) {
              //绩效数据名称(判断必填样式)
              if(null != r.inputType){
                if (r.inputType.isRequired == '0') {
                // <span style = 'color:red' >
                  return <span>{t}<span style = 'color:#f5222d'>* </span></span>
                } else {
                  return t;
                }
              } else {
                return t;
              }
            }
          },
          {
            title: '预计目标',
            align: 'center',
            scopedSlots: { customRender: 'expectedValue' },
          },
        ],
        url: {
          list: '/performance/performanceTarget/getTargetAndVariable',
          saveRecords: '/performance/performanceVariableRecord/saveRecords'
        }
      }
    },
    created(){
    },
    methods: {

      loadData() {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        this.loading = true;
        getAction(this.url.list,{internalId:this.internalId}).then((res) => {
          if (res.success) {
            this.dataSource = res.result;
            console.log(this.dataSource,'dataSource')
            if (this.dataSource.length>0){
              //调整为如果存在数据进行弹框没有直接提交
              this.visible = true
              this.dataSource.map((item)=>{
                if (null != item.inputType){
                  item.inputType = JSON.parse(item.inputType)
                }
              })
            }else {
              this.visible = false
              this.$emit('submitFlow')
            }
          }
          if(res.code===510){
            this.$message.warning(res.message)
          }
          this.loading = false;
        })
      },
      /**
       * @author pqz
       * @description 校验input属性
       */
      checkInputType(){
        let flag = true
        for (let item of this.dataSource) {
          //存在输入属性，且填报框为必填，且最小满足字数不为零
          if (null != item.inputType &&  '0' == item.inputType.isRequired && '0' != item.inputType.wordCount ){
            if(null == item.expectedValue || '' == item.expectedValue){
              this.$message.warning("请填报“"+item.variableName+"”预计目标值")
              flag = false
              return false;
            }
            if (item.expectedValue.length<item.inputType.wordCount) {
              this.$message.warning("“"+item.variableName+'”不能少于'+item.inputType.wordCount+'个字符');
              flag = false
              return false;
            }
          }
        }
        return flag
      },

      /**
       * @author pqz
       * @description 批量保存指标值记录
       */
      saveRecords(){
        if (this.checkInputType()){
          let list = []
          let that = this
          this.dataSource.map((item)=>{
            if (null != item.expectedValue && '' != item.expectedValue) {
              list.push({
                performanceTargetId:item.performanceTargetId,
                performanceVariableId:item.performanceVariableId,
                //支出主表
                dataTable:'expenditure_plan',
                dataTableId:that.mainId,
                expectedValue:item.expectedValue
              })
            }
          })
          postAction(this.url.saveRecords,list).then((res)=>{})
          this.$emit('submitFlow')
        }
      },

      handleOk(){
        this.saveRecords()
      },
      handleCancel(){
        this.close()
      },
      close(){
        this.tableCode = ''
        this.visible = false
      }
    }



  }
</script>

<style scoped lang='less'>
  /deep/ .ant-input-number {
    -ms-flex: 1;
    flex: 1;
    width: 100%;
  }
  /deep/ .ant-modal-footer {
    padding: 4px 16px !important;
  }
  /deep/ .ant-modal-header {
    padding: 9px 24px !important;
  }
  /deep/ .ant-modal-body {
    padding: 3px !important;
  }

</style>